<template>
  <div class="workflow-operation">
    <Panel>
      <PanelItem region="tbar" v-bind="panelOptions.tbar">
        <Toolbar>
          <Button style="margin-right: 10px" type="primary" @click="doFuncForm">业务表单</Button>
          <Button v-if="dataInfo.wfState == 'WAIT'" type="primary" @click="doSkip">前后跳转</Button>
          <Button
            v-if="dataInfo.wfState == 'WAIT'"
            style="margin-left: 10px"
            type="primary"
            @click="doAllot"
            >调拨</Button
          >
          <ToolbarFill />
          <Tooltip title="流程图">
            <Button icon="fal fa-sitemap" class="bgcolor-grey" @click="doWorkFlowImage" />
          </Tooltip>
        </Toolbar>
      </PanelItem>
      <PanelItem>
        <div class="workflow-operation-default">
          <div class="workflow-operation-default-from">
            <div class="workflow-operation-default-from-title">流程详情</div>
            <Form :model="formModel" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
              <Row :gutter="16">
                <Col :span="12">
                  <FormItem label="审核标记" name="SY_AUDFLAG">
                    <Select
                      v-model:value="formModel.SY_AUDFLAG"
                      disabled
                      config-info="JE_AUDFLAG,SY_AUDFLAG,code,S"
                    ></Select>
                  </FormItem>
                </Col>
                <Col :span="12">
                  <FormItem label="流程实例ID" name="SY_PIID">
                    <Input v-model:value="formModel.SY_PIID" disabled />
                  </FormItem>
                </Col>
              </Row>
              <Row :gutter="16">
                <Col :span="12">
                  <FormItem label="流程定义ID" name="SY_PDID">
                    <Input v-model:value="formModel.SY_PDID" disabled />
                  </FormItem>
                </Col>
                <Col :span="12">
                  <FormItem label="当前执行节点" name="SY_CURRENTTASK">
                    <Input v-model:value="formModel.SY_CURRENTTASK" disabled />
                  </FormItem>
                </Col>
              </Row>
              <Row :gutter="16">
                <Col :span="12">
                  <FormItem label="流程启动人" name="SY_STARTEDUSERNAME">
                    <Input v-model:value="formModel.SY_STARTEDUSERNAME" disabled />
                  </FormItem>
                </Col>
                <Col :span="12">
                  <FormItem label="流程待执行人" name="SY_PREAPPROVUSERNAMES">
                    <Input v-model:value="formModel.SY_PREAPPROVUSERNAMES" disabled />
                  </FormItem>
                </Col>
              </Row>
            </Form>
          </div>
          <div class="workflow-operation-default-tabs">
            <Tabs v-model:activeKey="activeKey">
              <TabPane key="wfHistory" tab="流程历史">
                <WorkflowHistory ref="$wfHistory" @collapsed="onWfCollapsed" />
                <div v-if="wfCollapsed" class="matrix-layout-nodata">
                  <div style="width: 100%">
                    <img :src="imgSrcData" />
                    <p>暂无数据 ~</p>
                  </div>
                </div>
              </TabPane>
            </Tabs>
          </div>
        </div>
      </PanelItem>
    </Panel>
  </div>
  <WorkflowOperationSkip
    v-if="skipShow"
    :data-info="dataInfo"
    :bean-id="beanId"
    @closeModal="doCloseModal"
  />
  <WorkflowOperationAllot
    v-if="allotShow"
    :data-info="dataInfo"
    :bean-id="beanId"
    @closeModal="doCloseModal"
  />
</template>

<script>
  import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue';
  import {
    Panel,
    Button,
    Form,
    Input,
    Row,
    Col,
    Tabs,
    Select,
    Toolbar,
    Tooltip,
  } from '@jecloud/ui';
  import { WorkflowHistory, showFuncForm } from '@jecloud/func';
  import { isNotEmpty } from '@jecloud/utils';
  import imgSrcData from '@/assets/nodata.png';
  import { getInfoById } from '@/api/monitoring';
  import { showWorkFlowImage } from '@/hooks/util.jsx';
  import WorkflowOperationSkip from './modal/operation-skip.vue';
  import WorkflowOperationAllot from './modal/operation-allot.vue';

  export default defineComponent({
    name: 'WorkflowOperation',
    components: {
      Panel,
      PanelItem: Panel.Item,
      Button,
      Form,
      FormItem: Form.Item,
      Input,
      Row,
      Col,
      Tabs,
      TabPane: Tabs.TabPane,
      WorkflowHistory,
      Select,
      Toolbar,
      ToolbarFill: Toolbar.Fill,
      Tooltip,
      WorkflowOperationSkip,
      WorkflowOperationAllot,
    },
    props: {
      beanId: String,
      callBack: Function,
      dataInfo: Object,
    },
    setup(props) {
      const $wfHistory = ref();
      const state = reactive({
        panelOptions: {
          tbar: {
            size: 46,
            style: 'padding: 7px 10px;background-color: #f1f1f1;overflow-x: auto;',
          },
        },
        formModel: {
          SY_AUDFLAG: 'NOSTATUS', //审核标记
          SY_PIID: '', //流程实例ID
          SY_PDID: '', //流程定义ID
          SY_CURRENTTASK: '', //当前执行节点
          SY_STARTEDUSERNAME: '', //流程启动人
          SY_PREAPPROVUSERNAMES: '', //流程待执行人
        },
        activeKey: 'wfHistory',
        wfCollapsed: false,
        skipShow: false,
        allotShow: false,
      });
      // 初始化表单数据
      const initFormData = () => {
        $wfHistory.value?.refresh({ beanId: props.beanId });
        if (isNotEmpty(props.dataInfo)) {
          getInfoById({
            params: {
              tableCode: props.dataInfo.tableCode,
              funcCode: props.dataInfo.funcCode,
              pkValue: props.beanId,
            },
            headers: { pd: props.dataInfo.pd },
          }).then((data) => {
            if (isNotEmpty(data)) {
              for (let key in state.formModel) {
                state.formModel[key] = data[key] || '';
              }
            }
          });
        }
      };
      onMounted(() => {
        initFormData();
      });
      const mothods = {
        // 前后跳转
        doSkip: () => {
          state.skipShow = true;
          //props.callBack && props.callBack();
        },
        // 调拨
        doAllot: () => {
          state.allotShow = true;
          //props.callBack && props.callBack();
        },
        // 打开业务表单
        doFuncForm: () => {
          showFuncForm(props.dataInfo.funcCode, { beanId: props.beanId });
        },
        // 流程历史加载后回调
        onWfCollapsed: ({ flag }) => {
          state.wfCollapsed = !flag;
        },
        // 打开流程预览图
        doWorkFlowImage: () => {
          showWorkFlowImage({ params: { beanId: props.beanId, pdid: props.dataInfo.pdid } });
        },
        // 关闭弹窗回调
        doCloseModal: ({ type, refresh }) => {
          state[type] = false;
          if (refresh) {
            initFormData();
            props.callBack && props.callBack();
          }
        },
      };
      return { ...toRefs(state), $wfHistory, ...mothods, imgSrcData };
    },
  });
</script>
<style lang="less" scoped>
  .workflow-operation {
    height: 100%;
    padding: 10px 0;
    &-default {
      height: 100%;
      padding-top: 10px;
      &-from {
        margin: auto;
        height: 200px;
        width: 1280px;
        border: 1px solid #efefef;
        padding: 10px 20px 20px 20px;
        &-title {
          height: 40px;
          font-size: 16px;
        }
      }
      &-tabs {
        margin: auto;
        margin-top: 20px;
        width: 1280px;
        border: 1px solid #efefef;
        .matrix-layout-nodata {
          height: 200px;
          width: 100%;
          text-align: center;
          display: inline-flex;
          align-items: center;
          img {
            display: block;
            margin: 0 auto;
            width: 16%;
          }
          p {
            width: 100%;
            text-align: center;
            font-size: 16px;
            color: #a9aba9;
            padding-top: 20px;
          }
        }
      }
    }
  }
</style>
<style lang="less">
  .workflow-operation {
    &-default {
      &-tabs {
        .ant-tabs-nav {
          margin-bottom: 0;
          padding: 0 12px;
          margin: 0 0 16px 0;
        }
      }
    }
  }
  .workflow-operation-image {
    background-image: url();
    border-bottom: 1px solid #d9d9d9;
    border-right: 1px solid #d9d9d9;
    padding: 20px;
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
  }
</style>
